<template>
  <div
    class="BlogMessageBox"
    :class="{
      dark: themeRef.state.themeState == 'drak',
      light: themeRef.state.themeState == 'light',
    }"
    v-loading="loadeRef"
    element-loading-background="rgba(117, 115, 113, 0.5)"
  >
    <template v-if="renderArr.length != 0">
      <div
        class="BlogMessageBoxChildBox"
        v-for="item in renderArr"
        :key="item.id"
      >
        <BlogSecondaryComment :item="item"></BlogSecondaryComment>
      </div>
    </template>
    <div class="null" v-else>评论列表为空！！来占个楼吧！</div>
    <div
      v-if="pageRef * 5 < messageNumber"
      class="loadMore"
      @click="getMoreMessage(blogID)"
    >
      点击加载更多 ( 剩余 {{ messageNumber - pageRef * 5 }} 条评论 )
    </div>
    <div
      v-else-if="pageRef * 5 > messageNumber && renderArr.length != 0"
      class="soo"
    >
      抱歉没有更多了
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import ins from "@/utils/Axios";
import BlogSecondaryComment from "../BlogSecondaryCommentsComp/BlogSecondaryComments.vue";
@Options({
  components: {
    BlogSecondaryComment,
  },
  props: { blogID: String, userID: String },
  watch: {},
  computed: {},
  mounted() {
    this.getMounted(this.blogID);
  },
})
export default class BlogItem extends Vue {
  themeRef: any = useStore();
  renderArr: Array<Object> = [];
  // 当前是第几页留言
  pageRef: number = 1;
  // 是否加载完成
  loadeRef: boolean = true;
  // 留言总数
  messageNumber: number = 0;
  // 获取更多的数据
  getMoreMessage(blogID: string) {
    this.pageRef++;
    ins
      .post("/message/getBlogMessage", {
        blogId: blogID,
        getNumber: 5,
        getPage: this.pageRef,
      })
      .then((res: any) => {
        let { data } = res;
        data.data.forEach((element: object) => {
          this.renderArr.push(element);
        });
      });
  }
  // 组件创建时立即请求数据
  getMounted(blogID: string) {
    ins
      .post("/message/getBlogMessage", {
        blogId: blogID,
        getNumber: 5,
        getPage: this.pageRef,
      })
      .then((res: any) => {
        let { data } = res;
        this.messageNumber = data.count;
        this.renderArr = data.data;
        this.loadeRef = false;
      });
  }
  // 缓存的设置于校验
  sessionStorageVerify(name: string) {
    if (sessionStorage.getItem(name) == "" || !sessionStorage.getItem(name)) {
      return false;
    } else {
      return JSON.parse(sessionStorage.getItem(name) || "");
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>